{% block script %}
    <script type="text/javascript" src="{{ settings.MirrorSite }}/static/assets/pagedown/Markdown.Converter.js"></script>
    <script type="text/javascript" src="{{ settings.MirrorSite }}/static/assets/pagedown/Markdown.Extra.js"></script>
    {% if user.is_admin() %}
    <script type="text/javascript" src="{{ settings.MirrorSite }}/static/assets/paste.js"></script>
    <script type="text/javascript" src="{{ settings.MirrorSite }}/static/assets/pagedown/Markdown.Editor.js"></script>
    {% endif %}
    <script type="text/javascript">
        $(document).ready(function(){
            var converter = new Markdown.Converter();
            Markdown.Extra.init(converter, {
                table_class: "table table-hover table-striped"
            });

            var md2html = converter.makeHtml;

            var page_content = $("#wmd-input");
            var page = $("#wmd-preview");

            var show_page = function(){
                page.html(md2html(page_content.val()));
                setTimeout(function(){
                    $("pre>code", page).parent().addClass("prettyprint");
                    prettyPrint();
                }, 100);
                page.imagesLoaded(function(){
                    $("img", page).image_box(150, 120, "page", "#wmd-preview");
                    $("img", page).image_info(150, 120);
                });
            };
            show_page();

            {% if user.is_admin() %}
            var page_editor = $("#page_editor");
            var inputs = $("input,select,textarea", page_editor).not("[type=submit]");

            var md_editor = new Markdown.Editor(converter);
            md_editor.run();

            md_editor.hooks.chain("onPreviewRefresh", function () {
                show_page();
                $("textarea", page_editor).focus();
            });

            var upload_photo = function(data, callback){
                var settings = { binary : $.toJSON(data.replace(/^.+,/,"")) };
                $.json_action("photo/upload",
                    settings,
                    function(resp){
                        callback && callback(resp.photo);
                    },function(err){
                        bootbox.hideAll();
                        bootbox.alert(err);
                    }
                );
            };

            var enable_paste_image = function($input_elem) {
                $input_elem.each(function(i, el){
                    var paste = (new $.paste()).appendTo('body')
                        .on('pasteImage', function(ev, data){
                            bootbox.dialog({
                                message: "{{ _("Paste Image Uploading ......") }}",
                                closeButton: false
                            });
                            upload_photo(data.dataURL, function(photo){
                                bootbox.hideAll();
                                md_editor.addText("\n![{0}]({1})\n".format(photo.alt, photo.url));
                            });
                        });
                    $(el).on('paste', function(ev){
                        paste.trigger(ev);
                    });
                });
            };

            enable_paste_image(page_content);


            $("#save_page").click(function(){
                $.json_action(page_editor.attr("data-action"),
                        $.json_options(inputs),
                        function(resp){
                            show_page();
                            page_editor.hide();
                        },function(err){
                            bootbox.alert(err);
                        }
                );
            });
            $("#cancel").click(function(){
                page_editor.hide();
            });

            // change top bar button
            var $btn_edit = $("#new-post");
            $btn_edit.html('<i class="fa fa-pencil"></i> {{ _("Edit Page") }}');
            $btn_edit.click(function(){
                page_editor.show();
                $("textarea", page_editor).focus();
            });
            {% endif %}
        });
    </script>
{% endblock %}

{% block body %}
<div class="container container-fluid">
    <div class="row">
        <div id="page_editor" class="dis-none wmd-panel col-lg-12" data-action="category/update">
            <input type="hidden" name="id" value="{{ category.id }}"/>
            <div id="wmd-button-bar" class="wmd-button-bar"></div>
            <div class="col-lg-12">
            <textarea rows="16" class="form-control"
                      id="wmd-input" name="content">{{ category.content or ""|default("")|safe }}</textarea>
            </div>
            <div class="col-lg-12">
            <button id="save_page" class="btn btn-primary">{{ _("Save") }}</button>
            <button id="cancel" class="btn">{{ _("Cancel") }}</button>
            </div>
            <div class="col-lg-12">
            <hr/>
            </div>
        </div>
        <div id="wmd-preview" class="wmd-panel col-lg-12"></div>
    </div>
</div>
{% endblock %}
